import {defineStore} from 'pinia'
import {setStore, getStore, removeStore} from '/src/utils/store.js'
import website from '/src/config/website.js'

export const useCommonStore = defineStore('common', {
    state: () => ({
        language: !(!getStore({name: 'language'}) && !'zh-cn'),
        isCollapse: false,
        isFullScreen: false,
        isMenu: true,
        isShade: false,
        // 表示屏幕尺寸的，具体实现在admin.js中。3-大屏幕 2-中屏幕 1-小屏幕 0-超小屏幕
        screen: 2,
        isLock: getStore({name: 'isLock'}) || false,
        showTag: true,
        showDebug: true,
        showCollapse: true,
        showSearch: false,
        showLock: true,
        showFullScreen: true,
        showTheme: true,
        showMenu: false,  //TODO 顶部的首页、工作台、几个菜单。调用的是top-menu接口，目前没有数据，等menu完成后，再来处理。
        showColor: true,
        showCockpit: true,
        showTranslation: false,
        colorName: getStore({name: 'colorName'}) ,
        themeName: getStore({name: 'themeName'}) || 'theme-bule ',
        lockPasswd: getStore({name: 'lockPasswd'}) || '',
        website: website,
        isSearch: false,
        isRefresh: true,
        isUseLocalMenu: true,
        setting: website.setting
    }),
    getters: {
        isHorizontal: store => store.setting.sidebar === 'horizontal',
        isMacOs: store => store.themeName == 'mac-os',
    },
    actions: {
        SET_LANGUAGE(language) {
            this.language = language
            setStore({
                name: 'language',
                content: this.language
            })
        },
        SET_SHADE(state, active)  {
            state.isShade = active;
        },
        SET_COLLAPSE() {
            this.isCollapse = !this.isCollapse;
        },
        SET_IS_MENU(menu) {
            this.isMenu = menu;
        },
        SET_IS_REFRESH(refresh) {
            this.isRefresh = refresh;
        },
        SET_IS_SEARCH(search) {
            this.isSearch = search;
        },
        SET_FULLSCREEN() {
            this.isFullScreen = !this.isFullScreen;
        },
        SET_LOCK() {
            this.isLock = true;
            setStore({
                name: 'isLock',
                content: this.isLock,
                type: 'session'
            })
        },
        SET_SCREEN ( screen)  {
            this.screen = screen;
        },
        SET_COLOR_NAME ( colorName)  {
            this.colorName = colorName;
            setStore({
                name: 'colorName',
                content: this.colorName,
            })
        },
        SET_THEME_NAME(themeName) {
            this.themeName = themeName;
            setStore({
                name: 'themeName',
                content: this.themeName,
            })
        },
        SET_LOCK_PASSWD(lockPasswd) {
            this.lockPasswd = lockPasswd;
            setStore({
                name: 'lockPasswd',
                content: this.lockPasswd,
                type: 'session'
            })
        },
        CLEAR_LOCK()  {
            this.isLock = false;
            this.lockPasswd = '';
            removeStore({
                name: 'lockPasswd',
                type: 'session'
            });
            removeStore({
                name: 'isLock',
                type: 'session'
            });
        },
        SET_WEBSITE ( website)  {
            state.website.indexTitle = website;
        },
        SET_WEBLOGO( logo)  {
            state.website.logo = logo;
        },
    }
})